<template>
  <div>
    <div>
      <ele-page
        v-loading="loading"
        :formConfig="searchConfig"
        ref="eleTable"
        :operateList="operateList"
        @handleOperateEvent="handleOperateEvent"
        :column="column"
        :getList="getList"
        uniqueId="wmsOrderCheckTaskTable"
      >
      </ele-page>
      <ele-form-dialog
        :title="title"
        :visible.sync="visible"
        :isLoading="dialogLoading"
        :request-fn="handleSubmit"
        v-model="dialogFormData"
        v-bind="dialogFormConfig"
        width="450px"
      >
        <template v-slot:personName>
          <!-- 插槽内容有el-form-item组件包裹 -->
          <el-input
            v-model="dialogFormData.personName"
            readonly
            :placeholder="$t('common.select')"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="baseUserDialogVisible = true"
            ></el-button>
          </el-input>
        </template>
      </ele-form-dialog>
      <ele-dialog-table
        title="用户信息查询"
        width="800px"
        class="usermodalTable"
        :visible.sync="baseUserDialogVisible"
        :formConfig="baseUserSearchDialog"
        :column="baseUserDialogColumn"
        @getSelectData="getSelectBaseUser"
        :otherParam="otherParam"
        :getList="getUserListByRoleIdAndFactory"
        :transFormdata="transFormdata"
        ref="modelTable"
      >
      </ele-dialog-table>
    </div>
  </div>
</template>

<script>
import {
  operateList,
  searchConfig,
  rowConfig,
  dialogFormConfig,
  userMixin,
} from "./config";
import {
  getList,
  rowDel,
  getPersonFlagList,
  getLevelList,
  getDpFlagList,
  getScanFlagList,
  getOrderTypeList,
  getOrderStatusList,
  appoint,
  getsnControlList
} from "@/api/checkorder/mesOrderCheckTask";

import {
  getAreaCodeList,
  getCurrentWarehouseCode,
} from "@/api/outbound/wmsOutTaskDetail";
import {getUserList, getUserListByRoleIdAndFactory} from "@/api/user";
export default {
  name: "mesOrderCheckTask",
  mixins: [userMixin],
  data() {
    return {
      loading: false,
      title: "",
      dialogFormConfig,
      dialogFormData: {},
      sub2TransFormdata: Function,
      otherParam:{roleIds:'1840200220378427394'},
      dialogLoading: false,
      visible: false,
      searchConfig,
      operateList,
      getList,

      // 列表页字段的绑定配置
      column: [
        {
          type: "selection",
        },
        {
          type: "index",
          label: $i18n.t("common.order"),
          fixed: "left",
          width: 60,
        },
        {
          prop: "orderNo",
          width: 180,
          showOverflowTooltip: true,
          fixed: "left",
          label: "单据编号", // 单据编号
        },
        // {
        //   prop: "orderLine",
        //   label: "行项目", // 行项目
        //   width: 110,
        //   showOverflowTooltip: true,
        // },
        {
          prop: "orderStatus",
          label: "订单状态", // 订单状态10-未开始 20-盘点中 30-已完成
          optionProp: {
            value: "value",
            label: "description",
          },
          option: async (data) => {
            const list = await getOrderStatusList();
            return list.data.result;
          },
          width: 120,
          showOverflowTooltip: true,
        },
        {
          prop: "goodsCode",
          width: 180,
          showOverflowTooltip: true,
          label: "商品编码", // 商品编码
        },
        {
          prop: "goodsName",
          width: 180,
          showOverflowTooltip: true,
          label:"商品名称", //
        },
        {
          prop: "goodsBrand",
          width: 180,
          showOverflowTooltip: true,
          label:"商品品牌", //
        },
        {
          prop: "specs",
          width: 180,
          showOverflowTooltip: true,
          label:"商品规格", //
        },
        {
          prop: "supplierName",
          width: 180,
          showOverflowTooltip: true,
          label:"供应商", //
        },
        {
          prop: "planAmount",
          width: 110,
          showOverflowTooltip: true,
          label: "应盘数量", // 应盘数量
        },
        {
          prop: "realAmount",
          width: 110,
          showOverflowTooltip: true,
          label:"实盘数量", // 实盘数量
        },
        {
          prop: "unit",
          label: $i18n.t("common.unit"),
          width: 100,
          showOverflowTooltip: true,
        },
        // {
        //   prop: 'snControl',
        //   label: $i18n.t('wmsOrderCheckTemplate.snControl'), // 管理SN
        //   width: 100,
        //   showOverflowTooltip: true,
        //   optionProp: {
        //     value: 'value',
        //     label: 'description'
        //   },
        //   option: async (data) => {
        //     const list = await getsnControlList()
        //     return list.data.result
        //   }
        // },
        {
          prop: "warehouseCode",
          label: "仓库编码", // 仓库编码
          width: 180,
          showOverflowTooltip: true,
          optionProp: {
            value: "modelingCode",
            label: "modelingName",
          },
          option: async (data) => {
            const list = await getCurrentWarehouseCode();
            return list.data.result;
          },
        },
        // {
        //   prop: "areaCode",
        //   width: 140,
        //   showOverflowTooltip: true,
        //   optionProp: {
        //     value: "areaCode",
        //     label: "areaDesc",
        //   },
        //   option: async (data) => {
        //     const list = await getAreaCodeList();
        //     return list.data.result;
        //   },
        //   label: $i18n.t("common.area"), // 库区
        // },
        // {
        //   prop: "locationCode",
        //   width: 110,
        //   showOverflowTooltip: true,
        //   label: $i18n.t("common.location"), // 库位编码
        // },
        {
          prop: "startTime",
          label: "盘点开始时间", // 盘点开始时间
          width: 160,
        },
        {
          prop: "endTime",
          label: "盘点结束时间", // 盘点结束时间
          width: 160,
        },
        // {
        //   prop: "level",
        //   width: 120,
        //   label: $i18n.t("wmsOrderCheckTask.level"), // 盘点级别
        //   optionProp: {
        //     value: "value",
        //     label: "description"
        //   },
        //   option: async (data) => {
        //     const list = await getLevelList()
        //     return list.data.result
        //   }
        // },
        {
          prop: "personName",
          width: 130,
          label: "指定盘点人姓名", // 指定盘点人账号
        },
        {
          prop: "actualPersonName",
          width: 130,
          label: "实际盘点人姓名", // 指定盘点人账号
        },
        {
          prop: "templateName",
          width: 160,
          showOverflowTooltip: true,
          label: "模板名称", // 模板名称
        },

        {
          prop: "createByName",
          label: $i18n.t("common.createByName"), // 创建人名称
          width: 130,
        },
        {
          prop: "createTime",
          label: $i18n.t("common.createTime"), // 创建时间
          width: 160,
        },
        {
          prop: "updateByName",
          label: $i18n.t("common.updateByName"), // 更新人名称
          width: 130,
        },
        {
          prop: "updateTime",
          label: $i18n.t("common.updateTime"), // 更新时间
          width: 160,
        },
        {
          prop: "operate",
          label: $i18n.t("common.operation"), // 操作
          width: 160,
          fixed: "right",
          render: (h, scope) => {
            return (
              <ele-row-operation
                scope={scope}
                rowConfig={rowConfig}
                onRowOperate={this.rowOperate}
              />
            );
          },
        },
      ],
    };
  },
  computed: {},
  methods: {
    transFormdata(data) {
      return  Promise.resolve({records: data.data.result});
    },
    // 指定盘点人提交
    handleSubmit(data) {
      if (this.dialogLoading) return;
      this.isLoading = true;
      appoint(this.dialogFormData)
        .then((res) => {
          const message = res.data.message;
          this.$message.success(message || $i18n.t("common.operateSuccess"));
          this.visible = false;
          this.refresh();
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    //表格顶部按钮操作事件
    handleOperateEvent({ handleName, name, rows }) {
      this.title = name;
      const fnc = {
        deleteBatch: () => {
          this.$confirm(
            $i18n.t("此操作将删除该盘点任务, 是否继续?"),
            $i18n.t("common.tip"),
            {
              confirmButtonText: $i18n.t("common.submit"),
              cancelButtonText: $i18n.t("common.cancel"),
              type: "warning",
            }
          ).then(() => {
            const ids = rows.map((val) => val.id).join(",");
            this.rowDel(ids);
          });
        },
        designatedStocktaker: () => {
          const mesOrderCheckTaskList = rows.map((i) => {
            return {
              id: i.id,
            };
          });
          this.dialogFormData = { mesOrderCheckTaskList };
          this.visible = true;
        },
      };
      fnc[handleName]();
    },
    //表格行操作事件
    rowOperate({ handleName, name, row }) {
      this.title = name;
      const fnc = {
        delete: () => {
          this.$confirm(
            $i18n.t("此操作将删除该盘点任务, 是否继续?"),
            $i18n.t("common.tip"),
            {
              confirmButtonText: $i18n.t("common.ok"),
              cancelButtonText: $i18n.t("common.cancel"),
              type: "warning",
            }
          ).then(() => {
            this.rowDel(row.id);
          });
        },
      };
      fnc[handleName]();
    },

    //删除
    rowDel(data) {
      this.loading = true;
      rowDel(data)
        .then((res) => {
          const message = res.data.message;
          this.$message.success(message || $i18n.t("common.deleteSuccess"));
          this.refresh();
        })
        .finally(() => {
          this.loading = false;
        });
    },

    //刷新表格数据
    refresh(isReset = true) {
      this.$refs.eleTable.refresh(isReset);
    },
  },
};
</script>
<style scoped lang="scss">
/deep/.usermodalTable {
  .el-dialog__body {
    max-height: 550px;
  }
}
</style>
